Popups: 10 Problematic Trends and Alternatives彈窗

大多數彈窗（包括模態和非模態）出現在不合適的時機，打斷使用者關鍵任務，使用不恰當的語言，導致使用者困惑。從數十年的使用者研究中我們得知，人們普遍不喜歡彈窗。使用者在關鍵操作中頻繁遇到彈窗，可能導致他們放棄任務，對網站或應用產生負面印象。

1. 不同型別的彈窗

彈窗（也稱覆蓋視窗或彈出框）是出現在頁面內容之上的視窗或對話方塊，分為以下兩種型別：

當背景內容被變暗時，稱之為燈箱（lightbox）。燈箱多為模態，但不絕對。

在彈出視窗的結構方面，模態覆蓋會禁用所有背景內容，非模態覆蓋會保留使用者與背景內容進行互動的能力，而燈箱會使背景內容變暗。

1. 頁面載入前展示彈窗

在頁面內容載入前彈出任何彈窗會讓使用者反感，因為使用者在尚未體驗到內容價值時便被打斷。此類彈窗不僅會令網站顯得急功近利，還會使使用者體驗變得急躁。Google對移動端此類妨礙使用者訪問內容的行為會降低網站搜尋排名。

替代方案：等待彈窗內容與使用者情境相關時再展示。採用互惠原則——在索取使用者資訊前先為其提供價值。透過使用者測試來確定適合彈窗內容的展示時機，避免無必要的彈窗，除非是出於法律要求（如Cookies同意請求或年齡驗證）。

赫芬頓郵報在主頁面內容載入之前向使用者展示了一個燈箱。這是對一種原本存在問題的做法的可接受使用，因為該網站在使用包括位置在內的個人資料時，依法有義務徵求同意。

2. 登入後立即彈出彈窗

使用者登入後一般會有下一步的任務，而登入後立即彈出的彈窗往往會打斷使用者，使其無法專注完成下一步任務，甚至引發使用者對中斷的反感。

替代方案：給使用者一些時間在登入後完成任務，避免立刻彈窗。可以在適當時機以工具提示或小型非模態覆蓋的形式展示新功能或賬戶相關建議，以增強而非幹擾使用者體驗。

Gmail 使用了一個相對不引人注目的非模態覆蓋層來引入一個新功能，該功能支援使用者當前清理收件箱的任務。非模態覆蓋層在使用者與收件箱進行互動後出現，而不是在登入後立即出現。

3. 在互動前索取郵箱

在使用者與網站內容進行互動前請求其提供郵箱地址（常見於電商、新聞網站或部落格）會令人反感，尤其使用者會懷疑此舉可能帶來垃圾郵件。過早彈出的郵箱請求通常只會激怒使用者，造成負面印象。

替代方案：考慮使用者最有可能願意提供郵箱的時機，例如當使用者瀏覽特定促銷商品或讀完一篇博文時。此時可以用非模態的輕量彈窗在螢幕角落出現，提供有吸引力的獎勵以換取使用者郵箱。

一位使用者對 Uncommon Goods 網站感到惱火，因為她剛到該網站不久，網站就顯示了一個模態覆蓋層，要求她提供電子郵件地址。
MarkManson.net 在人們閱讀完一篇部落格文章底部內容後，顯示了一個最小侵入性的非模態覆蓋層。該彈出視窗還提供了一本免費電子書作為激勵。

4. 使用者未完成任何操作前請求反饋

在使用者未執行任何有意義操作前請求反饋會顯得不合時宜。此類彈窗通常會被迅速關閉，且使用者不會再主動尋求反饋機會。反饋的最佳時機是使用者完成關鍵任務後，此時的反饋內容更具參考價值。

替代方案：在使用者完成重要任務後再請求反饋，確保反饋基於實際互動體驗。例如，視訊會議軟體BlueJeans在會議結束後請求反饋，這樣使用者的反饋更切合實際，減少了打擾。

一名研究參與者在試圖支付她的電話費賬單時，不情願地關閉了一個反饋模態。她表示，她在該網站上還沒有做任何事情來證明有必要提供反饋。
在使用者完成關鍵任務後立即向他們徵求反饋，而不是在他們剛到達您的網站時。這樣，您增加了收到相關評論或評級的機會。在這種情況下，使用模態覆蓋對使用者來說不那麼煩人且具有較少的幹擾性。

5. 關鍵任務中打斷使用者請求反饋

使用者通常會在關鍵任務期間專注於操作，而此時請求反饋只會導致反感。使用者一般不會因彈窗請求而中斷任務，尤其當任務對他們而言很重要時。

替代方案：在關鍵任務完成後再請求反饋，或提供靜態、非侵入性的反饋入口，如螢幕邊緣的標籤或頁尾連結，讓使用者隨時自願提供反饋。

美聯航的應用程式在一項關鍵任務（獲取登機牌）進行過程中，在正中間顯示了一個模態覆蓋層。
雀巢沒有透過反饋模態框來打斷使用者，而是在網站頁尾中包含了一個反饋連結。
英國航空公司在其所有頁面的右側顯示了一個標有“反饋”的按鈕。

6. 連續彈出多個彈窗

連續彈出多個彈窗會讓網站顯得雜亂無章，甚至讓使用者感到疲憊和不安。這種行為會導致使用者過度費力關閉每個彈窗，增加不必要的操作負擔。

替代方案：若必須使用彈窗傳遞重要資訊，請確保一次只顯示一個彈窗。更好的做法是將重要資訊放置在頁面中，使其更易發現和理解，並明確指引使用者操作以解決問題。

在結賬流程結束時，Lulus 同時展示了多種反饋模式。更好的方法應該是一次只展示一種，或者將反饋表單嵌入到確認頁面中。
Canva 在直接在頁面上顯示關鍵資訊方面做得很好。它使用放置在頂部的視覺上獨特的內容模組，而不是彈出視窗。該訊息傳遞幫助使用者瞭解他們需要做什麼來糾正問題。

彈窗的上下文：避免妨礙頁面轉換或內容訪問

轉換到子域或外部站點前的模態彈窗

一些企業網站在使用者準備從主站點跳轉到子域或外部網站前會彈出模態視窗，提示使用者即將離開當前頁面。然而，這種提醒往往會引起使用者的迷惑和不適，尤其是在新標籤頁開啟子站點時，使用者可能感到迷失方向。

使用者測試示例：在HSBC的招聘網站上，使用者在不同網站之間跳轉時遇到了多層模態彈窗。他表示，這一複雜的流程讓他對公司的申請流程產生負面印象。

點選“職業”後，一個模態視窗警告使用者他們即將離開初始網站。
在同一個網站上，使用者看到了另一個模態視窗，上面寫著他們將前往第三個網站申請該工作。

替代方案：避免使用模態彈窗，儘量減少網站間的轉換，並在外部連結中保留返回主站點的導航。如果確實需要提醒使用者離開當前頁面，可以使用更不顯眼的提示方式，如連結上的工具提示，讓過渡更自然。

Eli Lilly使用資訊提示來告知使用者即將前往其他站點，幫助使用者記住頁面路徑。

向使用者展示了一個資訊豐富的工具提示，讓他們知道自己將前往一個不同的網站。該工具提示幫助使用者記住他們在哪裡以及要去哪裡。

使用模態彈窗打斷內容訪問

當使用者剛載入一篇文章或長篇內容時彈出模態對話方塊會使使用者感到不適。這種行為讓使用者覺得必須先滿足一些條件才能閱讀內容，破壞了網站的可信度。一個例子是，CNN在使用者點選進入文章後立即彈出訂閱彈窗，導致使用者對網站的意圖產生懷疑。

CNN 的移動應用程式在使用者進入頁面閱讀文章時，恰好在右側顯示了一個模態視窗。這是有問題的，因為使用者來此的目的不是註冊 CNN 的新聞通訊，而是閱讀內容。

替代方案：允許使用者立即訪問內容，不要中斷其體驗。可以用頂部的易於關閉的橫幅替代模態彈窗，讓使用者自由選擇是否訂閱，而不會影響其主要任務。

Conde Nast Traveller網站在導航下方使用非侵入性的可關閉橫幅，給有興趣的使用者提供訂閱選項，而不幹擾其他使用者的瀏覽體驗。

康泰納仕旅行者網站在導航下方以一個微妙且非侵入性的可關閉橫幅介紹了其新聞通訊。這種設計允許感興趣的使用者訂閱新聞通訊，但不會分散那些只想閱讀該網站內容的使用者的注意力。

9. 用模態彈窗展示GDPR和Cookie通知

由於使用者已經習慣快速關閉彈窗，所以如果透過模態彈窗告知重要的隱私政策，資訊的傳達效果往往不佳。

替代方案：使用非模態彈窗，放置於頁面底部或側邊，讓使用者在不被打斷的情況下繼續瀏覽頁面內容，並提供清晰的隱私政策描述，以幫助使用者瞭解資料的收集和使用方式。

NNgroup.com使用非模態彈窗，詳細描述了資料使用的原因，增強了使用者對資料使用的信任感。

Reddit 使用了一個小而不顯眼的非模態覆蓋層來徵求使用者對 cookie 的同意；然而，描述人們的資料如何被使用的語言過於模糊。
NNgroup.com 使用了一個關於 cookie 使用情況的非模態覆蓋層，並使用了透明的語言。我們確切地闡述了為什麼我們收集人們的資料以及如何具體地將其用於他們的利益。

10. 鼓勵渠道轉換時未傳達具體好處的模態彈窗

在移動網站上使用模態彈窗推廣應用下載並不總是合適。尤其是對於偶然訪問的使用者，他們可能不願意切換到應用程式，更不希望重複當前的操作流程。此類彈窗可能會引起使用者反感，影響其對網站的整體印象。

Wayfair 用一個通用模態框打斷使用者，鼓勵他們下載其移動應用程式。使用者認為，如果要在另一個渠道重新開始任務，他們就得付出大量努力，而且沒有實際好處。

替代方案：選擇更輕度的方式提升應用程式的知名度，例如頂部橫幅，並在橫幅中清晰傳達下載應用程式的具體好處，幫助使用者平滑過渡。

Macy’s使用頁面底部的非模態彈窗，鼓勵使用者下載移動應用，並透過使用者評分顯示應用的受歡迎程度，同時不會打擾使用者當前的任務。

梅西百貨在鼓勵使用者從其移動網站下載移動應用程式方面做得很好。頁面底部的非模態覆蓋層包含了對渠道轉換的激勵措施，並展示了該應用程式的使用者評級。

在使用者體驗中，彈窗應謹慎使用，尤其應避免妨礙使用者的關鍵任務或阻礙內容訪問。設計上應優先考慮替代方式，尊重使用者的使用習慣，同時確保彈窗傳遞的資訊在適當時機展示。透過使用者測試評估彈窗效果，可以有效減少使用者困擾，同時獲得改進使用者體驗的洞見。